<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><style data-href="/styles.9cac66fdfea54cdb7dac.css">#carbonads,.carbonplaceholder{background-color:#281e36;color:#fff;padding:15px;border-radius:10px;width:290px;height:155px;margin:15px auto}@media (min-width:360px){#carbonads,.carbonplaceholder{width:320px}}.carbonplaceholder *{opacity:0;-webkit-animation:fade-in .2s .5s forwards;animation:fade-in .2s .5s forwards}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}#carbonads+.carbonplaceholder{display:none}#carbonads a{border:none}.carbon-wrap{display:flex}.carbon-img{padding-right:10px}.carbon-poweredby{display:block;text-align:right;font-size:12px}.carbon-text{font-size:14px}.carbon-poweredby,.carbon-text{text-decoration:none;color:inherit}

/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}hr{height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}body{line-height:1.6;background:#2f263c;color:#d2cbe4;font-family:-apple-system,Helvetica Neue,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,sans-serif}::selection{text-shadow:none;background:#8f51e6}h1,h2,h3{font-weight:400}code[class*=language-],pre[class*=language-]{font-family:Consolas,Menlo,Monaco,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Courier New,Courier,monospace;line-height:1.5;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#8f51e6}pre[class*=language-]{padding:10px 15px;margin:1em -15px;overflow:auto;background:#281e36;color:#ffe69d;font-size:14px;border-radius:0}@media (min-width:600px){pre[class*=language-]{font-size:16px;border:1px solid hsla(0,0%,100%,.05);margin-left:0;margin-right:0;border-radius:10px}}:not(pre)>code[class*=language-]{color:#ff6b81;font-weight:700;white-space:pre-wrap}:not(pre)>code[class*=language-]::selection,:not(pre)>code[class*=language-] ::selection{text-shadow:none;background:#8f51e6;color:#fff}.token-line{min-height:1em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#657fc8}.token.keyword,.token.punctuation{color:#4edee5}.token.namespace{opacity:.7}.token.boolean,.token.number,.token.operator,.token.tag{color:#ed655e}.token.function,.token.property{color:#b886fd}.token.atrule-id,.token.selector,.token.tag-id{color:#f3ebff}.token.attr-name,code.language-javascript{color:#d6b9fe}.language-css .token.string,.language-scss .token.string,.style .token.string,.token.atrule,.token.attr-value,.token.control,.token.directive,.token.entity,.token.placeholder,.token.regex,.token.statement,.token.string,.token.unit,.token.url,.token.variable,code.language-css,code.language-scss{color:#ffb6b3}.token.dom{color:#a5c8ff}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #f3ebff;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#d6b9fe}.token.entity{cursor:help}pre>code.highlight{outline:.4em solid #aa75f5;outline-offset:.4em}.line-numbers .line-numbers-rows{border-right-color:#372f42}.line-numbers-rows>span:before{color:#372f42}.line-highlight{background:rgba(237,101,94,.2);background:-webkit-gradient(linear,left top,right top,color-stop(70%,rgba(237,101,94,.2)),to(rgba(237,101,94,0)));background:linear-gradient(90deg,rgba(237,101,94,.2) 70%,rgba(237,101,94,0))}.gatsby-highlight-code-line{background-color:#1c1425;display:block;margin-right:-1em;margin-left:-1em;padding-right:1em;padding-left:.75em;border-left:.25em solid #ff6b81}</style><meta name="generator" content="Gatsby 2.18.13"><title data-react-helmet="true">Popper - Tooltip &amp; Popover Positioning Engine</title><meta data-react-helmet="true" name="description" content="Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications."><meta data-react-helmet="true" property="og:title" content="Home"><meta data-react-helmet="true" property="og:description" content="Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications."><meta data-react-helmet="true" property="og:type" content="website"><meta data-react-helmet="true" property="og:image" content="/images/popper-og-image.jpg"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:creator" content="@FezVrasta"><meta data-react-helmet="true" name="twitter:title" content="Home"><meta data-react-helmet="true" name="twitter:description" content="Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications."><link rel="icon" href="https://popperjs.bootcss.com/icons/icon-48x48.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="manifest" href="https://popperjs.bootcss.com/manifest.webmanifest"><meta name="theme-color" content="#C83B50"><link rel="apple-touch-icon" sizes="48x48" href="https://popperjs.bootcss.com/icons/icon-48x48.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="72x72" href="https://popperjs.bootcss.com/icons/icon-72x72.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="96x96" href="https://popperjs.bootcss.com/icons/icon-96x96.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="144x144" href="https://popperjs.bootcss.com/icons/icon-144x144.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="192x192" href="https://popperjs.bootcss.com/icons/icon-192x192.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="256x256" href="https://popperjs.bootcss.com/icons/icon-256x256.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="384x384" href="https://popperjs.bootcss.com/icons/icon-384x384.png?v=fee0a7bffcef99cffef49f85c7525731"><link rel="apple-touch-icon" sizes="512x512" href="https://popperjs.bootcss.com/icons/icon-512x512.png?v=fee0a7bffcef99cffef49f85c7525731"><link as="script" rel="preload" href="https://popperjs.bootcss.com/webpack-runtime-857b7aeda177552b6e6b.js"><link as="script" rel="preload" href="https://popperjs.bootcss.com/styles-8abe0d11adef3e3c6620.js"><link as="script" rel="preload" href="https://popperjs.bootcss.com/commons-58cf04ccf34f7124f06f.js"><link as="script" rel="preload" href="https://popperjs.bootcss.com/app-ea06e347fb131e1a4bd8.js"><link as="script" rel="preload" href="https://popperjs.bootcss.com/component---src-pages-index-mdx-ab952846ad8f8831adf4.js"><link as="fetch" rel="preload" href="https://popperjs.bootcss.com/page-data/index/page-data.json" crossorigin="anonymous"></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><style data-emotion-css="8b03fs">.css-8b03fs{background-image:url(),radial-gradient(350px,#fff,#fff1e1 20%,#ffa0b1);text-align:center;padding:60px 25px 50px;background-size:cover;background-position:center 60%;}@media (min-width:600px){.css-8b03fs{background-image:url(),radial-gradient(500px,#fff,#fff1e1 20%,#ffa0b1);}}</style><header class="css-8b03fs e44rv90"><style data-emotion-css="l0yu3p">.css-l0yu3p{height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:25px;}</style><img src="static/picture/popper-logo-394b4ea5914aad7fc580f418ed0cfb17.svg" alt="Popper logo" draggable="false" class="css-l0yu3p e44rv91"><style data-emotion-css="1t1ntfm">.css-1t1ntfm{margin:0 auto;max-width:100%;font-family:'Luckiest Guy',sans-serif;-webkit-font-smoothing:antialiased;color:#c83b50;text-transform:uppercase;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;font-size:30px;line-height:1.1;margin-bottom:-15px;}@media (min-width:600px){.css-1t1ntfm{font-size:36px;}}</style><h2 class="css-1t1ntfm e44rv92">Tooltip &amp; Popover <br> Positioning Engine</h2><style data-emotion-css="1fk54bz">.css-1fk54bz{color:#642f45;font-size:22px;font-style:italic;font-weight:500;margin-bottom:20px;line-height:1.2;}</style><p class="css-1fk54bz e44rv93">Weighs just <strong>3 kB!</strong></p><style data-emotion-css="46b038">.css-46b038{margin-top:30px;}</style><div class="css-46b038"><style data-emotion-css="vacq0u">.css-vacq0u{display:inline-block;background:white;padding:10px 16px;border-radius:4px;-webkit-text-decoration:none;text-decoration:none;font-size:16px;font-weight:700;color:#c83b50;box-shadow:0 8px 16px -4px rgba(200,59,80,0.5);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;text-transform:uppercase;margin:5px;}.css-vacq0u:hover{background:#c73a50;color:white;border-color:#c73a50;}</style><a href="javascript:;" rel="nofollow noreferrer" class="css-vacq0u"><style data-emotion-css="1oabto8">.css-1oabto8{vertical-align:-7px;margin-right:5px;}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1oabto8"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> Star on GitHub</a><a class="css-vacq0u" href="javascript:;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1oabto8"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>Documentation</a></div></header><style data-emotion-css="37cqfe">.css-37cqfe{background:#c83b50;padding:15px 0;font-weight:bold;margin-bottom:25px;}</style><div class="css-37cqfe eie7key0"><style data-emotion-css="1x1kqpe">.css-1x1kqpe{padding:0 15px;max-width:900px;margin:0 auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 15px;max-width:1000px;color:white;}@media (min-width:600px){.css-1x1kqpe{padding:0 25px;}}@media (min-width:768px){.css-1x1kqpe{padding:0 40px;}}@media (min-width:992px){.css-1x1kqpe{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}</style><div class="css-1x1kqpe eie7key1"><style data-emotion-css="r7q7qr">.css-r7q7qr{margin-bottom:5px;}</style><div class="css-r7q7qr"><style data-emotion-css="mc2z91">.css-mc2z91{vertical-align:-5px;margin-right:10px;}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-mc2z91"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>Install Popper</div><style data-emotion-css="17nq0j0">.css-17nq0j0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#642f45;border-radius:4px;color:#ffd3f8;font-family:Menlo,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;overflow:hidden;font-weight:normal;margin-top:8px;max-width:100%;overflow-x:auto;}@media (min-width:600px){.css-17nq0j0{max-width:none;}}@media (min-width:992px){.css-17nq0j0{margin-top:0;}}</style><div class="css-17nq0j0 eie7key2"><style data-emotion-css="178jhhz">.css-178jhhz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0.25);text-align:center;padding:0 15px;color:white;}</style><div class="css-178jhhz eie7key3"><style data-emotion-css="ac6cjn">.css-ac6cjn{max-width:50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}</style><img src="" draggable="false" class="css-ac6cjn eie7key4"></div><style data-emotion-css="1303313">.css-1303313{padding:10px 15px;white-space:nowrap;}</style><div class="css-1303313 eie7key5">npm i @popperjs/core</div></div><div class="css-17nq0j0 eie7key2"><div class="css-178jhhz eie7key3">CDN</div><div class="css-1303313 eie7key5">https://unpkg.com/@popperjs/core@^2.0.0</div></div></div></div><style data-emotion-css="yhwehx">.css-yhwehx{padding:0 15px;max-width:1400px;margin:0 auto;}@media (min-width:600px){.css-yhwehx{padding:0 25px;}}@media (min-width:768px){.css-yhwehx{padding:0 40px;}}</style><div class="css-yhwehx exyshz40"><style data-emotion-css="11be7e4">.css-11be7e4{padding:40px 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.css-11be7e4:not(:last-of-type){border-bottom:1px solid #44395d;}@media (min-width:992px){.css-11be7e4{display:grid;grid-template-columns:2fr 3fr;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;font-size:17px;padding:50px 0;}}.css-11be7e4 strong{color:#ff6b81;}.css-11be7e4 p{margin-top:0;}</style><article class="css-11be7e4 eetfspd12"><style data-emotion-css="1n3pguj">.css-1n3pguj{position:relative;width:100%;-webkit-scrollbar-color:rgba(255,230,157,1) transparent;-moz-scrollbar-color:rgba(255,230,157,1) transparent;-ms-scrollbar-color:rgba(255,230,157,1) transparent;scrollbar-color:rgba(255,230,157,1) transparent;border-radius:10px;height:350px;text-align:center;margin:0 auto;}.css-1n3pguj::-webkit-scrollbar{-webkit-appearance:none;width:7px;}.css-1n3pguj::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(255,230,157,1);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5);}@media (min-width:992px){.css-1n3pguj{height:450px;}}</style><div class="css-1n3pguj eetfspd10"><style data-emotion-css="bmx4re">.css-bmx4re{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;width:50px;height:50px;padding:0;border:none;background:none;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.54,1.5,0.38,1.2);-webkit-transition:transform 0.4s cubic-bezier(0.54,1.5,0.38,1.2);transition:transform 0.4s cubic-bezier(0.54,1.5,0.38,1.2);cursor:pointer;outline:0;will-change:transform;-webkit-tap-highlight-color:transparent;}.css-bmx4re:focus > div{box-shadow:0 0 0 6px rgba(255,100,150,0.4);}.css-bmx4re:hover{-webkit-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5);}.css-bmx4re[data-placement^='top']{top:0;left:50%;margin-left:-25px;}.css-bmx4re[data-placement^='bottom']{bottom:0;left:50%;margin-left:-25px;}.css-bmx4re[data-placement='top-start'],.css-bmx4re[data-placement='bottom-start']{left:calc(50% - 50px);}.css-bmx4re[data-placement='top-end'],.css-bmx4re[data-placement='bottom-end']{left:calc(50% + 50px);}.css-bmx4re[data-placement^='right']{right:0;top:50%;margin-top:-25px;}.css-bmx4re[data-placement^='left']{left:0;top:50%;margin-top:-25px;}.css-bmx4re[data-placement='left-start'],.css-bmx4re[data-placement='right-start']{top:calc(50% - 50px);}.css-bmx4re[data-placement='left-end'],.css-bmx4re[data-placement='right-end']{top:calc(50% + 50px);}</style><button data-placement="top-start" class="css-bmx4re eetfspd6"><style data-emotion-css="11ek9oi">.css-11ek9oi{width:18px;height:18px;border:2px solid #ff6b81;background:transparent;border-radius:50%;}</style><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="top" selected="" class="css-bmx4re eetfspd6"><style data-emotion-css="xd4ojf">.css-xd4ojf{width:18px;height:18px;border:2px solid #ff6b81;background:#ff6b81;border-radius:50%;}</style><div selected="" class="css-xd4ojf eetfspd7"></div></button><button data-placement="top-end" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="right-start" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="right" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="right-end" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="bottom-end" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="bottom" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="bottom-start" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="left-end" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="left" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><button data-placement="left-start" class="css-bmx4re eetfspd6"><div class="css-11ek9oi eetfspd7"></div></button><style data-emotion-css="1c1qz8s">.css-1c1qz8s{position:absolute;top:50%;margin-top:-60px;}</style><style data-emotion-css="11jst5o">.css-11jst5o{position:relative;left:50%;width:134px;height:120px;margin-left:-67px;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);position:absolute;top:50%;margin-top:-60px;}@media (min-width:600px){.css-11jst5o{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}</style><img alt="Popcorn box" src="static/picture/popcorn-box-f16f5d64e675baca26519478e88e4961.svg" class="css-11jst5o"><style data-emotion-css="x1w4jc">.css-x1w4jc{position:absolute;top:0;left:0;background:#fff;color:#642f45;padding:5px 10px;border-radius:4px;font-weight:bold;font-size:14px;text-align:left;pointer-events:none;visibility:hidden;z-index:1;}.css-x1w4jc[data-popper-placement^='top'] > [data-popper-arrow]{bottom:-4px;}.css-x1w4jc[data-popper-placement^='right'] > [data-popper-arrow]{left:-4px;}.css-x1w4jc[data-popper-placement^='bottom'] > [data-popper-arrow]{top:-4px;}.css-x1w4jc[data-popper-placement^='left'] > [data-popper-arrow]{right:-4px;}.css-x1w4jc [data-small]{display:block;}.css-x1w4jc [data-small] ~ *:not([data-small]){display:none;}@media (min-width:600px){.css-x1w4jc [data-small]{display:none;}.css-x1w4jc [data-small] ~ *:not([data-small]),.css-x1w4jc:not([data-small]){display:block;}}</style><div class="css-x1w4jc evfaqp90"><style data-emotion-css="huitvq">.css-huitvq{font-weight:900;text-transform:uppercase;}</style><div data-small="true" class="css-huitvq eetfspd4">Tip</div><div class="css-huitvq eetfspd4">Popcorn</div><style data-emotion-css="15g7enh">.css-15g7enh,.css-15g7enh::before{width:10px;height:10px;position:absolute;z-index:-1;}.css-15g7enh::before{content:'';-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background:#fff;top:0;left:0;}</style><div data-popper-arrow="true" class="css-15g7enh evfaqp91"></div></div></div><style data-emotion-css="1omfl4x">.css-1omfl4x{padding:20px 0 0;display:grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;}@media (min-width:992px){.css-1omfl4x{padding:0 40px;margin-bottom:0;}}</style><div class="css-1omfl4x eetfspd13"><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg> Placement</h3><p><strong>Click on the dots</strong> to place the tooltip. There are 12 different placements to choose from.</p><pre class="prism-code language-js"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> createPopper </span><span class="token punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">&#x27;@popperjs/core&#x27;</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> popcorn </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&#x27;#popcorn&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> tooltip </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&#x27;#tooltip&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token function">createPopper</span><span class="token punctuation">(</span><span class="token plain">popcorn</span><span class="token punctuation">,</span><span class="token plain"> tooltip</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">  placement</span><span class="token punctuation">:</span><span class="token plain"> </span><span class="token string">&#x27;top&#x27;</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></pre></div></article><article class="css-11be7e4 eetfspd12"><style data-emotion-css="1bqxjor">.css-1bqxjor{position:relative;width:100%;-webkit-scrollbar-color:rgba(255,230,157,1) transparent;-moz-scrollbar-color:rgba(255,230,157,1) transparent;-ms-scrollbar-color:rgba(255,230,157,1) transparent;scrollbar-color:rgba(255,230,157,1) transparent;border-radius:10px;overflow-y:scroll;overscroll-behavior:contain;height:350px;margin:0 auto;border:2px dashed #ff6b81;background-color:#281e36;}.css-1bqxjor::-webkit-scrollbar{-webkit-appearance:none;width:7px;}.css-1bqxjor::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(255,230,157,1);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5);}@media (min-width:992px){.css-1bqxjor{height:450px;}}.css-1bqxjor::before{content:'';display:block;width:1px;height:600px;}.css-1bqxjor::after{content:'';display:block;width:1px;height:600px;}</style><div class="css-1bqxjor eetfspd11"><style data-emotion-css="rv9anm">.css-rv9anm{position:absolute;left:100px;}</style><style data-emotion-css="8iw416">.css-8iw416{position:relative;left:50%;width:134px;height:120px;margin-left:-67px;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);position:absolute;left:100px;}@media (min-width:600px){.css-8iw416{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}</style><img alt="Popcorn box" src="static/picture/popcorn-box-f16f5d64e675baca26519478e88e4961.svg" class="css-8iw416"><div class="css-x1w4jc evfaqp90"><div class="css-huitvq eetfspd4">Popcorn</div><div class="css-huitvq eetfspd4">sizes</div><div class="css-huitvq eetfspd4">&amp; Price</div><style data-emotion-css="1l7mgse">.css-1l7mgse{font-weight:normal;}</style><div class="css-1l7mgse eetfspd5">XXS: $1.99</div><div class="css-1l7mgse eetfspd5">XS: $2.99</div><div class="css-1l7mgse eetfspd5">S: $3.99</div><div class="css-1l7mgse eetfspd5">M: $4.99</div><div class="css-1l7mgse eetfspd5">L: $5.99</div><div class="css-1l7mgse eetfspd5">XL: $6.99</div><div class="css-1l7mgse eetfspd5">XXL: $7.99</div><div data-popper-arrow="true" class="css-15g7enh evfaqp91"></div></div></div><div class="css-1omfl4x eetfspd13"><h3 class="css-1g0qsux eetfspd3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg> Overflow prevention</h3><p><strong>Scroll the container</strong> (or the whole page) to see the tooltip stay within the boundary. Once the opposite edges of the popcorn and tooltip are aligned, the tooltip is allowed to overflow to prevent detachment.</p><pre class="prism-code language-js"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> createPopper </span><span class="token punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">&#x27;@popperjs/core&#x27;</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> popcorn </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&#x27;#popcorn&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> tooltip </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&#x27;#tooltip&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token function">createPopper</span><span class="token punctuation">(</span><span class="token plain">popcorn</span><span class="token punctuation">,</span><span class="token plain"> tooltip</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">  placement</span><span class="token punctuation">:</span><span class="token plain"> </span><span class="token string">&#x27;right&#x27;</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></pre></div></article><article class="css-11be7e4 eetfspd12"><div class="css-1bqxjor eetfspd11"><style data-emotion-css="m4yai1">.css-m4yai1{position:relative;left:50%;width:134px;height:120px;margin-left:-67px;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);}@media (min-width:600px){.css-m4yai1{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}</style><img alt="Popcorn box" src="static/picture/popcorn-box-f16f5d64e675baca26519478e88e4961.svg" class="css-m4yai1"><div class="css-x1w4jc evfaqp90"><div class="css-huitvq eetfspd4">Popcorn</div><div class="css-1l7mgse eetfspd5">New Item</div><div data-popper-arrow="true" class="css-15g7enh evfaqp91"></div></div></div><div class="css-1omfl4x eetfspd13"><h3 class="css-1g0qsux eetfspd3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg> Flipping</h3><p><strong>Scroll the container</strong> (or the whole page) to see the tooltip flip to the opposite side once it&#x27;s about to overflow the visible area. Once enough space is detected on its preferred side, it will flip back.</p><pre class="prism-code language-js"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> createPopper </span><span class="token punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">&#x27;@popperjs/core&#x27;</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> popcorn </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&#x27;#popcorn&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> tooltip </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&#x27;#tooltip&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token function">createPopper</span><span class="token punctuation">(</span><span class="token plain">popcorn</span><span class="token punctuation">,</span><span class="token plain"> tooltip</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></pre></div></article></div><style data-emotion-css="19n6kal">.css-19n6kal{background-color:#281e36;padding:40px 0;font-size:16px;text-align:center;}@media (min-width:992px){.css-19n6kal{font-size:18px;padding:50px 0;}}.css-19n6kal:not(:last-of-type){border-bottom:1px solid #362c4f;}</style><section class="css-19n6kal eetfspd8"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" fill="none" stroke="#ffe69d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3">In a nutshell, Popper:</h3><style data-emotion-css="369zo8">.css-369zo8{padding-left:20px;list-style:none;margin-top:0;text-align:left;}</style><ul class="css-369zo8 eetfspd14"><style data-emotion-css="72dxhv">.css-72dxhv svg{display:inline-block;top:6px;left:2px;margin-right:6px;position:relative;color:#ff6b81;height:25px;margin-left:-30px;}.css-72dxhv strong{color:#ff6b81;}.css-72dxhv:not(:last-of-type){margin-bottom:10px;}</style><li class="css-72dxhv eetfspd15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><strong>Places your tooltip or popover relative to the reference</strong> <!-- -->taking into account their sizes, and positions its arrow centered to the reference.</li><li class="css-72dxhv eetfspd15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><strong>Takes into account the many different contexts it can live in</strong> <!-- -->relative to the reference (different offsetParents, different or nested scrolling containers).</li><li class="css-72dxhv eetfspd15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><strong>Keeps your tooltip or popover in view as best as possible</strong>. It prevents it from being clipped or cut off (overflow prevention) and changes the placement if the original does not fit (flipping).</li></ul></div></section><style data-emotion-css="19n6kal">.css-19n6kal{background-color:#281e36;padding:40px 0;font-size:16px;text-align:center;}@media (min-width:992px){.css-19n6kal{font-size:18px;padding:50px 0;}}.css-19n6kal:not(:last-of-type){border-bottom:1px solid #362c4f;}</style><section class="css-19n6kal eetfspd8"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" fill="none" stroke="#ffe69d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3">Granular configuration with sensible defaults</h3><p>Popper aims to &quot;just work&quot; without you needing to configure much. Of course, there are cases where you need to configure Popper beyond its defaults – in these cases, Popper shines by offering high granularity of configuration to fine-tune the position or behavior of your popper.</p><p>You can extend Popper with your own modifiers (or plugins) to make your popper work for you, no matter how advanced the scenario.</p></div></section><style data-emotion-css="19n6kal">.css-19n6kal{background-color:#281e36;padding:40px 0;font-size:16px;text-align:center;}@media (min-width:992px){.css-19n6kal{font-size:18px;padding:50px 0;}}.css-19n6kal:not(:last-of-type){border-bottom:1px solid #362c4f;}</style><section class="css-19n6kal eetfspd8"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" fill="none" stroke="#ffe69d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3">No compromises</h3><style data-emotion-css="369zo8">.css-369zo8{padding-left:20px;list-style:none;margin-top:0;text-align:left;}</style><ul class="css-369zo8 eetfspd14"><style data-emotion-css="72dxhv">.css-72dxhv svg{display:inline-block;top:6px;left:2px;margin-right:6px;position:relative;color:#ff6b81;height:25px;margin-left:-30px;}.css-72dxhv strong{color:#ff6b81;}.css-72dxhv:not(:last-of-type){margin-bottom:10px;}</style><li class="css-72dxhv eetfspd15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><strong>No detachment</strong>. Position updates take less than a millisecond on average devices. Popper doesn&#x27;t debounce the positioning updates of the tooltip to the point where it will<!-- --> <em>ever</em> detach from its reference, but this doesn&#x27;t come at the cost of poor performance.</li><li class="css-72dxhv eetfspd15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><strong>You don&#x27;t have to change the DOM context of your tooltip or popover element</strong>; it will work no matter where your popper and reference elements live, even in the most complex scenarios like nested scrolling containers or alternative offsetParent contexts.</li><li class="css-72dxhv eetfspd15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><strong>Still lightweight</strong>. Handling all of this complexity is still done in an efficient manner. The base Popper is only 2 kB minzipped.</li></ul></div></section><style data-emotion-css="19n6kal">.css-19n6kal{background-color:#281e36;padding:40px 0;font-size:16px;text-align:center;}@media (min-width:992px){.css-19n6kal{font-size:18px;padding:50px 0;}}.css-19n6kal:not(:last-of-type){border-bottom:1px solid #362c4f;}</style><section class="css-19n6kal eetfspd8"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" fill="none" stroke="#ffe69d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"></path><polyline points="13 11 9 17 15 17 11 23"></polyline></svg><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3">UI Tools Using Popper</h3><p>Looking for some real life examples of UI Kits, Dashboards and Design Systems that are implementing Popper? Try these hand picked Free &amp; Premium products!</p><style data-emotion-css="xa19pd">.css-xa19pd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media (max-width:600px){.css-xa19pd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><div class="css-xa19pd e1wu37k10"><style data-emotion-css="ktovif">.css-ktovif{-webkit-flex:0 0 33.3333333333%;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;padding:20px;}.css-ktovif a{color:#fff;-webkit-text-decoration:none;text-decoration:none;}</style><div class="css-ktovif e1wu37k11"><a href="javascript:;" target="_blank" rel="sponsored noopener noreferrer"><style data-emotion-css="c8h8af">.css-c8h8af{width:100%;border-radius:5px;box-shadow:0 2rem 1.5rem -1.5rem rgba(33,37,41,0.15),0 0 1.5rem 0.5rem rgba(33,37,41,0.05);-webkit-transition:0.1s ease;transition:0.1s ease;}</style><img src="https://raw.githack.com/creativetimofficial/public-assets/master/argon-dashboard-pro/argon-dashboard-pro.jpg" class="css-c8h8af e1wu37k12"></a><style data-emotion-css="tr0r3x">.css-tr0r3x{margin-top:15px;}</style><div class="css-tr0r3x e1wu37k13"><a href="javascript:;" target="_blank" rel="sponsored noopener noreferrer">Argon Dashboard PRO</a></div><style data-emotion-css="1qxtz39">.css-1qxtz39{font-size:12px;}</style><div class="css-1qxtz39 e1wu37k14">Premium Bootstrap 4 Admin - $79</div></div><div class="css-ktovif e1wu37k11"><a href="javascript:;" target="_blank" rel="sponsored noopener noreferrer"><img src="https://raw.githack.com/creativetimofficial/public-assets/master/material-dashboard-pro-html/opt_mdp_thumbnail.jpg" class="css-c8h8af e1wu37k12"></a><div class="css-tr0r3x e1wu37k13"><a href="javascript:;" target="_blank" rel="sponsored noopener noreferrer">Material Dashboard PRO</a></div><div class="css-1qxtz39 e1wu37k14">Premium Bootstrap 4 Material Admin - $49</div></div><div class="css-ktovif e1wu37k11"><a href="javascript:;" target="_blank" rel="sponsored noopener noreferrer"><img src="https://raw.githack.com/creativetimofficial/public-assets/master/now-ui-dashboard-pro/now-ui-dashboard-pro.jpg" class="css-c8h8af e1wu37k12"></a><div class="css-tr0r3x e1wu37k13"><a href="javascript:;" target="_blank" rel="sponsored noopener noreferrer">Now UI Dashboard PRO</a></div><div class="css-1qxtz39 e1wu37k14">Premium Bootstrap 4 Admin - $49</div></div></div></div></section><style data-emotion-css="19n6kal">.css-19n6kal{background-color:#281e36;padding:40px 0;font-size:16px;text-align:center;}@media (min-width:992px){.css-19n6kal{font-size:18px;padding:50px 0;}}.css-19n6kal:not(:last-of-type){border-bottom:1px solid #362c4f;}</style><section class="css-19n6kal eetfspd8"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" fill="none" stroke="#ffe69d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3">Free open-source, used by millions</h3><p>Popper has billions of hits across the web, is trusted by millions of developers in production, and used in popular libraries like Bootstrap and Material UI.</p><style data-emotion-css="w5wlfn">.css-w5wlfn{display:inline-block;background:white;padding:10px 16px;border-radius:4px;-webkit-text-decoration:none;text-decoration:none;font-size:16px;font-weight:700;margin-top:10px;color:#c83b50;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;text-transform:uppercase;}.css-w5wlfn:hover{background:#c73a50;color:white;border-color:#c73a50;}</style><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="css-w5wlfn eetfspd2">Support us</a><style data-emotion-css="y1gt6f">.css-y1gt6f{margin-top:40px;}</style><div class="css-y1gt6f eetfspd0"><style data-emotion-css="1qkqa41">.css-1qkqa41{opacity:0.2;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}.css-1qkqa41:hover{opacity:1;}.css-1qkqa41 img{height:40px;margin:10px;}</style><a href="javascript:;" target="_blank" class="css-1qkqa41 eetfspd1" title="Used by Microsoft" rel="noopener noreferrer"><img src="" alt="Used by Microsoft"></a><a href="javascript:;" target="_blank" class="css-1qkqa41 eetfspd1" title="Used by Atlassian" rel="noopener noreferrer"><img src="" alt="Used by Atlassian"></a><a href="javascript:;" target="_blank" class="css-1qkqa41 eetfspd1" title="Used by Bootstrap" rel="noopener noreferrer"><img src="" alt="Used by Bootstrap"></a><a href="javascript:;" target="_blank" class="css-1qkqa41 eetfspd1" title="Used by Drupal" rel="noopener noreferrer"><img src="" alt="Used by Drupal"></a><a href="javascript:;" target="_blank" class="css-1qkqa41 eetfspd1" title="Used by GitLab" rel="noopener noreferrer"><img src="" alt="Used by GitLab"></a><a href="javascript:;" target="_blank" class="css-1qkqa41 eetfspd1" title="Used by Medium" rel="noopener noreferrer"><img src="" alt="Used by Medium"></a></div></div></section><style data-emotion-css="19n6kal">.css-19n6kal{background-color:#281e36;padding:40px 0;font-size:16px;text-align:center;}@media (min-width:992px){.css-19n6kal{font-size:18px;padding:50px 0;}}.css-19n6kal:not(:last-of-type){border-bottom:1px solid #362c4f;}</style><section class="css-19n6kal eetfspd8"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" fill="none" stroke="#ffe69d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg><style data-emotion-css="1g0qsux">.css-1g0qsux{font-family:'Luckiest Guy',sans-serif;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;text-transform:uppercase;font-size:30px;-webkit-font-smoothing:antialiased;margin-top:15px;margin-bottom:15px;line-height:1.1;color:#f4e0f1;}</style><h3 class="css-1g0qsux eetfspd3">Ready to start?</h3><p>Start reading<!-- --> <style data-emotion-css="1qdvdcd">.css-1qdvdcd{color:#ffe69d;-webkit-text-decoration:none;text-decoration:none;padding-bottom:1px;border-bottom:2px solid rgba(255,228,148,0.25);-webkit-transition:border-bottom-color 0.15s ease-in-out;transition:border-bottom-color 0.15s ease-in-out;}.css-1qdvdcd:hover{border-bottom:2px solid rgba(255,228,148,1);}.css-1qdvdcd:active{border-bottom-style:dashed;}</style><a class="css-1qdvdcd" href="javascript:;">Popper&#x27;s documentation</a>!</p></div></section><style data-emotion-css="1ohuxbg">.css-1ohuxbg{text-align:center;background-color:#1c1428;padding:25px 0;color:#8e72b4;}</style><footer class="css-1ohuxbg exyshz41"><style data-emotion-css="nl6ak6">.css-nl6ak6{padding:0 15px;max-width:900px;margin:0 auto;}@media (min-width:600px){.css-nl6ak6{padding:0 25px;}}@media (min-width:768px){.css-nl6ak6{padding:0 40px;}}</style><div class="css-nl6ak6 exyshz40"><p>© <!-- -->2020<!-- --> MIT License</p></div></footer></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-ea06e347fb131e1a4bd8.js"],"component---src-pages-404-mdx":["/component---src-pages-404-mdx-e1e10e5a0dfc83fd883c.js"],"component---src-pages-docs-v-1-index-mdx":["/component---src-pages-docs-v-1-index-mdx-8f32d66c2653ba503a5a.js"],"component---src-pages-docs-v-2-browser-support-mdx":["/component---src-pages-docs-v-2-browser-support-mdx-cbd53cefb051d776758f.js"],"component---src-pages-docs-v-2-constructors-mdx":["/component---src-pages-docs-v-2-constructors-mdx-b7949397a4704b4005e0.js"],"component---src-pages-docs-v-2-faq-mdx":["/component---src-pages-docs-v-2-faq-mdx-7aa8a2b3cf8360cde7cd.js"],"component---src-pages-docs-v-2-index-mdx":["/component---src-pages-docs-v-2-index-mdx-162142b3d2401b1f7979.js"],"component---src-pages-docs-v-2-lifecycle-mdx":["/component---src-pages-docs-v-2-lifecycle-mdx-211efa97f5d6d65d85ac.js"],"component---src-pages-docs-v-2-modifiers-apply-styles-mdx":["/component---src-pages-docs-v-2-modifiers-apply-styles-mdx-76440f3f398888d1b20d.js"],"component---src-pages-docs-v-2-modifiers-arrow-mdx":["/component---src-pages-docs-v-2-modifiers-arrow-mdx-06599abcc90b4e90bc00.js"],"component---src-pages-docs-v-2-modifiers-compute-styles-mdx":["/component---src-pages-docs-v-2-modifiers-compute-styles-mdx-c19157291684a86c063c.js"],"component---src-pages-docs-v-2-modifiers-event-listeners-mdx":["/component---src-pages-docs-v-2-modifiers-event-listeners-mdx-1889c555722527aae913.js"],"component---src-pages-docs-v-2-modifiers-flip-mdx":["/component---src-pages-docs-v-2-modifiers-flip-mdx-0a5e2d541381cc547a87.js"],"component---src-pages-docs-v-2-modifiers-hide-mdx":["/component---src-pages-docs-v-2-modifiers-hide-mdx-89fab9acdb043c9ee827.js"],"component---src-pages-docs-v-2-modifiers-index-mdx":["/component---src-pages-docs-v-2-modifiers-index-mdx-1f64e80332761c5d8027.js"],"component---src-pages-docs-v-2-modifiers-offset-mdx":["/component---src-pages-docs-v-2-modifiers-offset-mdx-1c23b6e13f8bf880d541.js"],"component---src-pages-docs-v-2-modifiers-popper-offsets-mdx":["/component---src-pages-docs-v-2-modifiers-popper-offsets-mdx-9db52bee2b8966f04031.js"],"component---src-pages-docs-v-2-modifiers-prevent-overflow-mdx":["/component---src-pages-docs-v-2-modifiers-prevent-overflow-mdx-b69c49cfd33244247d65.js"],"component---src-pages-docs-v-2-tippy-mdx":["/component---src-pages-docs-v-2-tippy-mdx-c45198dcfcf922565beb.js"],"component---src-pages-docs-v-2-tree-shaking-mdx":["/component---src-pages-docs-v-2-tree-shaking-mdx-566b324508fe1b35b1f0.js"],"component---src-pages-docs-v-2-tutorial-mdx":["/component---src-pages-docs-v-2-tutorial-mdx-8963ae6892c05859cf0c.js"],"component---src-pages-docs-v-2-typings-mdx":["/component---src-pages-docs-v-2-typings-mdx-c7f76a455c57521373f9.js"],"component---src-pages-docs-v-2-utils-detect-overflow-mdx":["/component---src-pages-docs-v-2-utils-detect-overflow-mdx-609d6dde394c6ca69f01.js"],"component---src-pages-docs-v-2-utils-index-mdx":["/component---src-pages-docs-v-2-utils-index-mdx-a99289b4020e31608979.js"],"component---src-pages-docs-v-2-virtual-elements-mdx":["/component---src-pages-docs-v-2-virtual-elements-mdx-f7f1c1d97fbf19b6593a.js"],"component---src-pages-index-mdx":["/component---src-pages-index-mdx-ab952846ad8f8831adf4.js"]};/*]]>*/</script><script src="static/js/component---src-pages-index-mdx-ab952846ad8f8831adf4.js" async=""></script><script src="static/js/app-ea06e347fb131e1a4bd8.js" async=""></script><script src="static/js/commons-58cf04ccf34f7124f06f.js" async=""></script><script src="static/js/styles-8abe0d11adef3e3c6620.js" async=""></script><script src="static/js/webpack-runtime-857b7aeda177552b6e6b.js" async=""></script></body></html>